<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            let option = {
                color: ['#ee2fff', '#21adfe', '#5af6ff', '#2ce857', "#8a7aff"],
                legend: {
                    data: ["建设工程", "政府采购", "综合交易", "土地拍卖", "医疗器械"],
                    right: '20px',
                    y: 'center',
                    itemHeight: 12,
                    itemWidth: 16,
                    orient: 'vertical',
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 16,
                        lineHeight: 16,
                    },
                    selectedMode: false,
                    formatter: function(name) {
                        var data = option.series[0].data;
                        var total = 0;
                        var tarValue;
                        for (var i = 0, l = data.length; i < l; i++) {
                            total += data[i].value;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        var p = (tarValue / total * 100).toFixed(2);
                        return name + ' ' + '(' + p + '%)';
                    },
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0',
                    top: '0',
                },
                series: [{
                    name: '标题',
                    type: 'pie',
                    center: ['35%', '50%'],
                    radius: ['44%', '61%'],
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: true,
                            position: 'outter',
                            formatter: function(parms) {
                                return parms.data.name + "\n" + parms.percent + "%";
                            },
                            lineHeight: 24,
                            textStyle: {
                                fontSize: 15,
                            },
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 20,
                            lineStyle: {
                                color: '#217ad3',
                            }
                        }
                    },
                    data: [{
                        name: '建设工程',
                        value: 2
                    }, {
                        name: '政府采购',
                        value: 2
                    }, {
                        name: '综合交易',
                        value: 20
                    }, {
                        name: '土地拍卖',
                        value: 20
                    }, {
                        name: '医疗器械',
                        value: 20
                    }]
                }]
            };

            this.chart.setOption(option);

            var index6 = -1;
            let this_ = this;
            setInterval(function() {
                var dataLength = option.series[0].data.length;
                // 取消之前高亮的图形
                this_.chart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: index6
                });
                index6 = (index6 + 1) % dataLength;
                // 高亮当前图形
                this_.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: index6
                });
            }, 1000);
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
